<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视点和视线</title>
    <link rel="stylesheet" href="../css/common.css">
</head>
<body>
<canvas id="webgl" width="512" height="512"></canvas>
</body>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="../lib/cuon-matrix.js"></script>

<script>

    // /* 一、着色器部分 */
    // // 顶点着色器
    // var vertex_shader_source = '' +
    //     'attribute vec4 a_Position;' +
    //     'attribute vec4 a_Color;' +
    //     'uniform mat4 u_ViewMatrix;' +
    //     'varying vec4 v_Color;' +
    //     'void main() {' +
    //     '   gl_Position = u_ViewMatrix * a_Position;' +
    //     '   v_Color = a_Color;' +
    //     '}';
    //
    // // 片元着色器
    // var fragment_shader_source = '' +
    //     'precision mediump float;' +
    //     'varying vec4 v_Color;' +
    //     'void main(){' +
    //     '   gl_FragColor = v_Color;' +
    //     '}';
    //
    // /* 二、 初始化着色器，设置顶点信息*/
    // (function () {
    //
    //     // 获取canvas对象
    //     var canvas = document.getElementById('webgl');
    //
    //     // 获取webgl 上下文对象
    //     var gl = getWebGLContext(canvas);
    //
    //     // 初始化着色器
    //     if (!initShaders(gl, vertex_shader_source, fragment_shader_source)) {
    //         console.log('初始化着色器失败！');
    //         return false;
    //     }
    //
    //     // 设置顶点位置
    //     var n = initVertexBuffer(gl);
    //     if (n < 0) {
    //         console.log('顶点写入缓存失败！');
    //         return false;
    //     }
    //
    //     // 指定清除颜色
    //     gl.clearColor(0.0, 0.5, 0.5, 1.0);
    //
    //     var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');
    //     if (!u_ViewMatrix) {
    //         console.log('获取 uniform 变量 u_ViewMatrix 失败！');
    //         return false;
    //     }
    //
    //     // 用于设置摄像机视点的矩阵
    //     var viewMatrix = new Matrix4();
    //     viewMatrix.setLookAt(0.25, 0.25, 0.25, 0, 0, 0, 0, 1, 0);
    //
    //     // 设置视点矩阵
    //     gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);
    //
    //     gl.clear(gl.COLOR_BUFFER_BIT);
    //
    //     gl.drawArrays(gl.TRIANGLES, 0, n);
    //
    // }());
    //
    // /* 三、 设置顶点坐标和纹理坐标*/
    // function initVertexBuffer(gl) {
    //
    //     // 创建顶点坐标和纹理坐标
    //     var verticesColors = new Float32Array([
    //         // 顶点坐标  RGB值
    //          0.0,  0.5, -0.4, 0.4, 1.0, 0.4,// 最后面绿色三角形
    //         -0.5, -0.5, -0.4, 0.4, 1.0, 0.4,
    //          0.5, -0.5, -0.4, 1.0, 0.4, 0.4,
    //
    //          0.5,  0.4, -0.2, 1.0, 0.4, 0.4,// 中间黄色三角形
    //         -0.5,  0.4, -0.2, 1.0, 1.0, 0.4,
    //          0.0, -0.6, -0.2, 1.0, 1.0, 0.4,
    //
    //          0.0,  0.5,  0.0, 0.4, 0.4, 1.0,// 前面蓝色三角形
    //         -0.5, -0.5,  0.0, 0.4, 0.4, 1.0,
    //          0.5, -0.5,  0.0, 1.0, 0.4, 0.4
    //
    //     ]);
    //
    //     var n = 9;
    //
    //     // 创建缓冲区
    //     var vertexColorBuffer = gl.createBuffer();
    //     if (!vertexColorBuffer) {
    //         console.log('创建缓冲区失败！');
    //         return -1;
    //     }
    //
    //     gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
    //     gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
    //
    //     var FSIZE = verticesColors.BYTES_PER_ELEMENT;
    //
    //     var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    //     if (a_Position < 0) {
    //         console.log('获取 attribute 变量 a_Position 失败！');
    //         return -1;
    //     }
    //
    //     gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
    //     gl.enableVertexAttribArray(a_Position);
    //
    //     var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
    //     if (a_Color < 0) {
    //         console.log('获取 attribute 变量 a_Color 失败！');
    //         return -1;
    //     }
    //
    //     gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
    //     gl.enableVertexAttribArray(a_Color);
    //
    //     // 解除缓冲区对象的绑定
    //     gl.bindBuffer(gl.ARRAY_BUFFER, null);
    //
    //     return n;

    // }

</script>

<script>

    // 顶点着色器
    var v_shader_source = '' +
        'attribute vec4 a_Position;' +
        'attribute vec4 a_Color;' +
        'uniform mat4 u_ViewMatrix;' +
        'varying vec4 v_Color;' +
        'void main(){' +
        '   gl_Position = u_ViewMatrix * a_Position;' +
        '   v_Color = a_Color;' +
        '}';
    // 片元着色器
    var f_shader_source = '' +
        'precision mediump float;' +
        'varying vec4 v_Color;' +
        'void main(){' +
        '   gl_FragColor = v_Color;' +
        '}';


    (function () {

        var canvas = document.getElementById('webgl');

        var gl = getWebGLContext(canvas);

        if (!gl) {

            console.log('不能获取webgl 上下文');
            return false;

        }

        // 初始化渲染器
        if (!initShaders(gl, v_shader_source, f_shader_source)) {

            console.log('初始化渲染器失败');
            return false;

        }

        // 设置顶点位置
        var n = initVertexBuffers(gl);
        if (n < 0) {

            console.log('初始化顶点信息失败');
            return false;

        }

        // 设置清楚颜色
        gl.clearColor(0.0, 0.5, 0.5, 1.0);

        // 获取视图矩阵存储位置
        var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');
        if (!u_ViewMatrix) {

            console.log('获取视图存储位置失败');
            return false;

        }

        // 设置摄像机视点的矩阵
        var viewMatrix = new Matrix4();
        viewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0);

        // 设置视图矩阵
        gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);

        // 清楚 canvas
        gl.clear(gl.COLOR_BUFFER_BIT);

        // 绘制三角形
        gl.drawArrays(gl.TRIANGLES, 0, n);


        function initVertexBuffers(gl) {

            var verticesColors = new Float32Array([
                0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // The back green one
                -0.5, -0.5, -0.4, 0.4, 1.0, 0.4,
                0.5, -0.5, -0.4, 1.0, 0.4, 0.4,

                0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // The middle yellow one
                -0.5, 0.4, -0.2, 1.0, 1.0, 0.4,
                0.0, -0.6, -0.2, 1.0, 1.0, 0.4,

                0.0, 0.5, 0.0, 0.4, 0.4, 1.0,  // The front blue one
                -0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
                0.5, -0.5, 0.0, 1.0, 0.4, 0.4,
            ]);
            var n = 9;

            // 创建颜色缓冲区
            var vertexColorBuffer = gl.createBuffer();
            if (!vertexColorBuffer) {

                console.log('创建颜色缓冲区失败');
                return -1;

            }

            gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);

            var FSIZE = verticesColors.BYTES_PER_ELEMENT;

            var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
            if (a_Position < 0) {

                console.log('获取 attribute 变量失败');
                return -1;

            }

            gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6 , 0);
            gl.enableVertexAttribArray(a_Position);

            var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
            if(a_Color < 0) {
                console.log('Failed to get the storage location of a_Color');
                return -1;
            }
            gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
            gl.enableVertexAttribArray(a_Color);

            // Unbind the buffer object
            gl.bindBuffer(gl.ARRAY_BUFFER, null);

            return n;

        }

    }())


</script>

</html>